<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <button type="button" class="btn bg-maroon" @click="updateUser" >保存</button>
    <span v-for="r in roles">
        <input type="checkbox" name="hobby" :value="r" v-model="role"/>{{r}}
    </span>
</div>

    <script>

        new Vue({
            el:"#app",
            data:{
                roles:['AA','BB','CC'],
                role:['AA','CC']
            },
            methods:{
                updateUser(){
                    console.log(this.role);
                }
            }
        });
    </script>
</body>
</html>